﻿<template>
  <div class="designer-auth">
    <el-steps :active="active" simple process-status="wait">
      <el-step
          title="资料上传"
          icon="el-icon-edit"
          description="填写工作室信息"
      ></el-step>
      <el-step
          title="平台审核"
          icon="el-icon-money"
          description="平台确认中"
      ></el-step>
      <el-step
          title="认证成功"
          icon="el-icon-s-check"
          description="认证中心"
      ></el-step>
    </el-steps>
    <div v-if="active === 1" v-loading="loading">
      <el-form
          :model="formData"
          ref="studioForm"
          :rules="rules"
          :disabled="formDataDisabled"
          size="small"
          :inline="true"
          label-width="68px"
          label-position="left"
      >
        <el-divider content-position="left">身份信息</el-divider>
        <el-form-item label="工作室名称" label-width="95px" prop="name">
          <el-input
              v-model="formData.name"
              placeholder="请输入工作室名称"
              clearable
          ></el-input>
        </el-form-item>
        <el-form-item
            label="成立时间"
            label-width="80px"
            prop="establishYear"
        >
          <el-select
              v-model="formData.establishYear"
              placeholder="请选择成立时间·"
              clearable
          >
            <el-option
                v-for="item in establishYearOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
            >
            </el-option>
          </el-select> </el-form-item
        ><br />
        <el-form-item label="联系人姓名" label-width="95px" prop="contact">
          <el-input
              v-model="formData.contact"
              placeholder="请输入联系人姓名"
              clearable
          ></el-input>
        </el-form-item>
        <el-form-item
            label="联系方式"
            label-width="80px"
            prop="contactNumber"
        >
          <el-input
              v-model="formData.contactNumber"
              placeholder="请输入联系方式"
              clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="身份证号码" label-width="100px" prop="idNumber">
          <el-input
              v-model="formData.idNumber"
              placeholder="请输入身份证号码"
              clearable
          ></el-input> </el-form-item
        ><br />
        <el-form-item
            label="法人身份证（国徽面）"
            label-width="180px"
            prop="idPhoto0"
        >
          <image-upload
              :limit="1"
              class="idCord"
              :uploadImgUrl="uploadImgUrl"
              v-model="formData.idPhoto0"
          />
        </el-form-item>
        <el-form-item
            label="法人身份证（人像面）"
            label-width="180px"
            prop="idPhoto1"
        >
          <image-upload
              :limit="1"
              class="idCord"
              :uploadImgUrl="uploadImgUrl"
              v-model="formData.idPhoto1"
          /> </el-form-item
        ><br />
        <el-form-item
            label="所在城市"
            label-width="85px"
            prop="provinceName"
            :rules="[
              { required: true, message: '请选择省', trigger: 'change' },
            ]"
        >
          <el-select
              v-model="formData.provinceName"
              @change="changeProvince"
              filterable
              clearable
              placeholder="请选择省"
              style="margin-left: 24px"
          >
            <el-option
                v-for="item in provinceOptions"
                :key="item.name"
                :label="item.name"
                :value="item.name"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
            prop="cityName"
            :rules="[
              { required: true, message: '请选择市', trigger: 'change' },
            ]"
        >
          <el-select
              v-model="formData.cityName"
              @change="changeCity"
              filterable
              clearable
              placeholder="请选择市"
              style="margin-left: 10px"
          >
            <el-option
                v-for="item in cityOptions"
                :key="item.name"
                :label="item.name"
                :value="item.name"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
            prop="countyName"
            :rules="[
              { required: true, message: '请选择县区', trigger: 'change' },
            ]"
        >
          <el-select
              v-model="formData.countyName"
              filterable
              clearable
              placeholder="请选择县区"
              style="margin-left: 10px"
          >
            <el-option
                v-for="item in countyOptions"
                :key="item.name"
                :label="item.name"
                :value="item.name"
            >
            </el-option>
          </el-select> </el-form-item
        ><br />
        <el-form-item
            label="开户银行账号"
            label-width="110px"
            prop="bankAccountNumber"
        >
          <el-input
              v-model="formData.bankAccountNumber"
              placeholder="请输入开户银行账号"
              clearable
          ></el-input>
        </el-form-item>
        <el-form-item
            label="开户银行名称"
            label-width="110px"
            prop="bankAccountName"
        >
          <el-select
              v-model="formData.bankAccountName"
              clearable
              filterable
              placeholder="请输入关键词"
          >
            <el-option
                v-for="item in bankOptions"
                :key="item.id"
                :label="item.name"
                :value="item.name"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
            label="开户银行支行名称"
            label-width="140px"
            prop="bankAccountBranchName"
        >
          <el-input
              v-model="formData.bankAccountBranchName"
              placeholder="请输入开户银行支行名称"
              clearable
          ></el-input> </el-form-item
        ><br />
        <el-form-item label="擅长设计风格" label-width="110px" prop="styleId">
          <el-radio-group
              v-model="formData.styleId"
              style="margin-left: 10px; max-width: 1000px"
          >
            <el-radio
                v-for="item in styleList"
                :label="item.id"
                :key="item.id"
            >{{ item.name }}
            </el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item
            v-show="formData.styleId == 0"
            style="margin-left: 10px"
            prop="staleName"
        >
          <el-input
              style="width: 250px"
              placeholder="请输入擅长设计风格"
              v-model="formData.styleName"
          ></el-input> </el-form-item
        ><br />
        <el-form-item
            label="擅长品类"
            label-width="82px"
            prop="domainIdList"
            style="margin: 0px"
        >
          <el-checkbox-group
              v-model="formData.domainIdList"
              style="margin-left: 10px; max-width: 900px"
          >
            <el-checkbox
                v-for="item in domainList"
                :label="item.id"
                :key="item.id"
            >{{ item.name }}</el-checkbox
            >
          </el-checkbox-group>
        </el-form-item>
        <el-divider content-position="left"
        >作品集（需要上传3个作品集，请勿将多个作品放在同一个作品中！）</el-divider
        >
        <el-form-item
            v-for="(item, index) in formData.worksList"
            :key="index + 1"
        >
          <el-form-item
              label="作品名"
              :prop="'worksList.' + index + '.name'"
              :rules="[
                { required: true, message: '请输入作品名', trigger: 'blur' },
              ]"
          >
            <el-input
                v-model="item.name"
                placeholder="请输入作品名"
            ></el-input>
          </el-form-item>

          <el-form-item
              label="类型"
              :prop="'worksList.' + index + '.type'"
              :rules="[
                {
                  required: true,
                  message: '请选择作品类型',
                  trigger: 'change',
                },
              ]"
          >
            <el-select v-model="item.type" clearable placeholder="请选择">
              <el-option
                  v-for="item in typeList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.name"
              >
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item
              label="链接"
              :prop="'worksList.' + index + '.link'"
              :rules="[
                {
                  required: true,
                  message: '请输入作品链接',
                  trigger: 'change',
                },
              ]"
          >
            <el-input
                v-model="item.link"
                placeholder="请输入"
                style="width: 280px"
            ></el-input> </el-form-item
          ><br />
          <el-form-item
              label="上传作品图"
              label-width="100px"
              :prop="'worksList.' + index + '.photo'"
              :rules="[
                { required: true, message: '请上传作品图片', trigger: 'blur' },
              ]"
              style="margin: 0px"
          >
            <image-upload
                v-model="item.photo"
                :fileSize="fileSize"
                :limit="1"
                :uploadImgUrl="uploadImgUrl"
            />
          </el-form-item>
          <el-button
              type="warning"
              round
              plain
              v-show="index === 0"
              @click="addWorksList"
              style="position: absolute; bottom: 20px; right: 20px"
          >添加</el-button
          >
          <el-button
              type="danger"
              round
              plain
              v-show="index !== 0"
              @click="delWorksList(index)"
              style="position: absolute; bottom: 20px; right: 20px"
          >删除</el-button
          >
          <hr style="background-color: #dcdfe6; height: 1px; border: none" />
        </el-form-item>
      </el-form>
      <div style="text-align: center">
        <el-button
            size="small"
            v-if="!formDataDisabled"
            @click="submitForm"
        >提交认证</el-button>
        <el-button
            size="small"
            v-if="formDataDisabled"
            @click="() => (active = 2)"
        >下一页</el-button
        >
      </div>
    </div>
    <div v-if="active === 2" v-loading="loading">
      <el-result icon="success" title="成功提示" subTitle="资料上传成功，平台确认中！！！">
      </el-result>
      <div style="text-align: center; margin-top: 10px">
        <el-button size="small" @click="preSubmit">查看提交信息</el-button>
      </div>
    </div>
    <div v-if="active === 3">
      <div class="auth-notice">
        <auth-notice></auth-notice>
      </div>
      <div style="text-align: center; margin-top: 10px">
        <el-button size="small" @click="preSubmit">查看提交信息</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import {metadataMixin} from "@/utils/metadata";
import ImageUpload from "@/components/ImageUpload";
import {getAuthInfo, submitAuth} from "@/api/user";
import AuthNotice from "@/views/person/auth/components/AuthNotice";


export default {
  name: "StudioAuth",
  components: {AuthNotice, ImageUpload},
  data() {
    return {
      // 认证状态及其原因
      loading: false,
      formDataDisabled: false,
      active: 1,
      fileSize: 10,
      other: false,
      formData: {
        //身份信息
        name: undefined,
        establishYear: undefined,
        contact: undefined,
        contactNumber: undefined,
        idNumber: undefined,
        idPhoto0: undefined,
        idPhoto1: undefined,
        provinceId: undefined,
        provinceName: undefined,
        cityId: undefined,
        cityName: undefined,
        countyId: undefined,
        countyName: undefined,
        // 银行
        bankAccountNumber: undefined,
        bankAccountName: undefined,
        bankAccountBranchName: undefined,
        //设计风格
        styleId: undefined,
        styleName: undefined,
        domainIdList: [],
        domainNameList: undefined,
        worksList: [],
      },
      rules: {
        name: [
          { required: true, message: "请输入工作室名称", trigger: "blur" },
        ],
        establishYear: [
          { required: true, message: "请选择成立时间", trigger: "change" },
        ],
        contact: [{ required: true, message: "请输入姓名", trigger: "blur" }],
        contactNumber: [
          { required: true, message: "请输入联系方式", trigger: "blur" },
          {
            pattern:
                /^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-79])|(?:5[0-35-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[189]))\d{8}$/,
            message: "请输入正确的联系方式",
            trigger: "blur",
          },
        ],
        idNumber: [
          { required: true, message: "请输入身份证号", trigger: "blur" },
          {
            pattern:
                /^\d{6}((((((19|20)\d{2})(0[13-9]|1[012])(0[1-9]|[12]\d|30))|(((19|20)\d{2})(0[13578]|1[02])31)|((19|20)\d{2})02(0[1-9]|1\d|2[0-8])|((((19|20)([13579][26]|[2468][048]|0[48]))|(2000))0229))\d{3})|((((\d{2})(0[13-9]|1[012])(0[1-9]|[12]\d|30))|((\d{2})(0[13578]|1[02])31)|((\d{2})02(0[1-9]|1\d|2[0-8]))|(([13579][26]|[2468][048]|0[048])0229))\d{2}))(\d|X|x)$/,
            message: "请输入正确的身份证",
            trigger: "blur",
          },
        ],
        idPhoto0: [
          { required: true, message: "请上传身份证正面照片", trigger: "blur" },
        ],
        idPhoto1: [
          {
            required: true,
            message: "请上传身份证国徽面照片",
            trigger: "blur",
          },
        ],
        bankAccountNumber: [
          { required: true, message: "请输入银行账号", trigger: "blur" },
        ],
        bankAccountName: [
          { required: true, message: "请选择银行名称", trigger: "change" },
        ],
        bankAccountBranchName: [
          { required: true, message: "请输入支行名称", trigger: "blur" },
        ],
        workSeniority: [
          { required: true, message: "请选择工作年限", trigger: "change" },
        ],
        currentWorkingStatus: [
          { required: true, message: "请选择工作年限", trigger: "change" },
        ],
        expectedMonthlyIncome: [
          { required: true, message: "请输入期望月收入", trigger: "blur" },
        ],
        styleId: [
          { required: true, message: "请选择擅长设计风格", trigger: "change" },
        ],
        domainIdList: [
          {
            type: "array",
            required: true,
            message: "请至少选择一个品类",
            trigger: "change",
          },
        ],
      },
      authType: 2,
      authLogs: [],
    };
  },
  mixins: [metadataMixin],
  created() {
    this.getStudioInfo();
  },
  methods: {
    preSubmit() {
      this.active = 1;
      this.formDataDisabled = true;
    },
    preEdit() {
      this.active = 1;
      this.formDataDisabled = false;
    },
    //初始化认证数据
    getStudioInfo() {
      this.active = 1;
      this.loading = true;
      getAuthInfo(this.authType).then(res=>{
        if(res){
          this.active = 2;
          let r1 = JSON.parse(res.examineJson)
          this.formData = r1
          if(r1){
            //初始化城市
            this.initCity(this.formData.provinceId);
            //初始化城镇
            this.initCounty(this.formData.cityId);
            this.formData.domainIdList = r1.domainIdList
            //作品集
            if (r1.worksList.length === 0) {
              if (this.formData.worksList.length === 0) {
                this.formData.worksList = [
                  {
                    name: null,
                    link: null,
                    type: null,
                    photo: null,
                  },
                ];
              }
            } else {
              this.formData.worksList = r1.worksList;
            }
          }
        }
        else {
          this.formData.worksList = [
            {
              name: null,
              link: null,
              type: null,
              photo: null,
            },
          ];
        }
        this.loading = false;
      })


    },
    //根据所选id获取市/县区的列表
    changeProvince(name) {
      let province = this.provinceOptions.find((item) => {
        if (item.name === name) {
          return item;
        }
      });
      this.initCity(province.provinceId);
    },
    changeCity(name) {
      let city = this.cityOptions.find((item) => {
        if (item.name === name) {
          return item;
        }
      });
      this.initCounty(city.cityId);
    },
    addWorksList() {
      let worksListStatus = true;
      this.formData.worksList.forEach((form) => {
        if (!(form.name && form.type && form.link && form.photo)) {
          worksListStatus = false;
        }
      });
      if (this.formData.worksList.length == 3) {
        this.$message.warning("最多只能添加三个作品");
        return;
      }
      if (worksListStatus) {
        this.formData.worksList.push({
          name: null,
          type: null,
          link: null,
          photo: null,
        });
      } else {
        this.$message.warning("请完善作品集的信息");
      }
    },
    delWorksList(index) {
      this.formData.worksList.splice(index, 1);
    },
    //提交数据
    submitForm() {
      this.loading = true;
      this.$refs["studioForm"].validate(async (valid) => {
        if (!valid) {
          this.$message.error("表单校验失败！");
          this.loading = false;
          return;
        }

        submitAuth(this.authType,this.formData)
            .then((res) => {
              this.loading = false;
              if(res){
                this.$message.success("认证申请提交成功！！！");
              }
            }).catch(() => {
          this.loading = false;
        });
      });
    },
  },
}
</script>

<style lang='scss' scoped>
.designer-auth {

}
::v-deep .el-upload--picture-card {
  width: 280px;
}
.idCord ::v-deep .el-upload-list--picture-card .el-upload-list__item {
  width: 232px;
}
.enterprise-form {
  width: 700px;
  margin-left: 10px;
  .form-title {
    background-color: aqua;
  }
}
> .el-step__title.is-finish {
  color: #f5db90 !important;
}
.experience {
  width: 85px;
  display: inline-block;
  padding-left: 8px;
  font-weight: bolder;
  margin-right: 12px;
}
.experience:before {
  content: "*";
  color: #ff4949;
  margin-right: 4px;
}
</style>
